<template>
  <div>
    <div class="Header">
      <div class="FirstFloor">
        <div
          @click="goRouter('main')"
          class="Logo"
          style="margin-left: -250px; cursor: pointer"
        >
          <a></a>
        </div>
        <div class="Search" style="margin-left: -150px">
          <div>
            <input
              type="text"
              class="SearchTextField"
              name="keyword"
              size="14"
              autocomplete="off"
              v-model="searchText"
              style="margin-left: -50px"
            />
            <input
              type="button"
              class="SearchButton"
              name="searchProducts"
              value="Search"
              @click="search()"
              style="cursor: pointer; margin-left: -170px"
            />
            <div>
              <select class="DropDownBox" name="ways">
                <!-- <option value="category">category</option> -->
                <!-- <option value="product">product name</option> -->
                <option value="product">item name</option>
              </select>
            </div>
          </div>

          <div class="SearchAutoCompleteDiv">
            <ul class="SearchAutoComplete"></ul>
          </div>
        </div>
      </div>

      <div class="SecondFloor">
        <div v-if="account == null">
          <div class="SignIn">
            <a @click="goRouter('login')" class="beforeSignIn"
              >Sign in <i class="fa-solid fa-right-to-bracket"></i
            ></a>
          </div>
          <div class="Cart">
            <a @click="goRouter('cart')" class="beforeSignIn"
              >Shopping Cart <i class="fa-solid fa-cart-shopping"></i
            ></a>
          </div>
          <div class="Problem">
            <a @click="goRouter('help')" class="beforeSignIn">
              Problem <i class="fa-regular fa-circle-question"></i
            ></a>
          </div>
        </div>
        <div v-else>
          <div class="SignOut">
            <a @click="signout()" class="afterSignIn"
              >Sign Out <i class="fa-solid fa-right-from-bracket"></i
            ></a>
          </div>
          <div class="MyAccount">
            <a @click="goRouter('myaccount')" class="afterSignIn"
              >My Account <i class="fa-solid fa-user"></i
            ></a>
          </div>
          <div class="Cart">
            <a @click="goRouter('cart')" class="afterSignIn"
              >Shopping Cart <i class="fa-solid fa-cart-shopping"></i
            ></a>
          </div>
          <div class="Problem">
            <a @click="goRouter('help')" class="afterSignIn"
              >Problem <i class="fa-regular fa-circle-question"></i
            ></a>
          </div>
        </div>
      </div>

      <div class="ThirdFloor" style="margin-left: -180px">
        <div class="FishLink">
          <a @click="goRouterPath('/category/FISH')"
            ><i class="fa-solid fa-fish-fins"></i> Fish</a
          ><br />
        </div>
        <div class="DogLink">
          <a @click="goRouterPath('/category/DOGS')"
            ><i class="fa-solid fa-dog"></i> Dogs</a
          ><br />
        </div>
        <div class="ReptileLink">
          <a @click="goRouterPath('/category/REPTILES')"
            ><i class="fa-solid fa-dragon"></i> Reptiles</a
          ><br />
        </div>
        <div class="CatLink">
          <a @click="goRouterPath('/category/CATS')"
            ><i class="fa-solid fa-cat"></i> Cats</a
          ><br />
        </div>
        <div class="BirdLink">
          <a @click="goRouterPath('/category/BIRDS')"
            ><i class="fa-solid fa-dove"></i> Birds</a
          ><br />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      searchText: "",
    };
  },
  computed: {
    ...mapState({
      account: (state) => state.account,
    }),
  },
  methods: {
    search() {
      // this.$http.get(`/search/item?keyword=${this.searchText}`).then((res) => {
      //   console.log(res);
      //   this.goRouter("search");
      // });
      // 跳转页面
      let text = this.searchText.trim();
      if (text == "") {
        return;
      }
      this.goRouterPath(`/search/${text}`);
    },
    signout() {
      this.$store.commit("clearAll");
      // this.goRouter("login");
    },
    goRouter(name) {
      this.$router.push({ name: name });
    },
    goRouterPath(path) {
      this.$router.push({ path: path });
    },
  },
};
</script>

<style scoped>
@import url(../../assets/css/mypetstoreNew.css);
@import url(../../assets/css/order.css);
</style>
